<template>
    <view :class="['button', 'button-color-' + type, {
        'button-size-normal': (!small && !large) &&  normal,
        'button-size-large': large,
        'button-size-small': small,
    }, {
        'text': text
    }, {
        'loading': loading
    },{
        'disabled': disabled
    }]" @click="click">
        <u-loading-icon style="margin-right: 1rem;" v-if="loading"></u-loading-icon>
        <slot></slot>
    </view>
</template>

<script>
    export default {
        name: 'Button',
        props: {
            small: {
                type: Boolean,
                default: false
            },
            normal: {
                type: Boolean,
                default: true
            },
            large: {
                type: Boolean,
                default: false
            },
            type: {
                type: String,
                default: 'default'
            },
            disabled: {
                type: Boolean,
                default: false
            },
            text: {
                type: Boolean,
                default: false
            },
            loading: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            click() {
				if (this.loading || this.disabled) {
					return;
				}
                this.$emit('click');
            }
        }
    }
</script>

<style lang="scss" scoped>
    .button {
        border-radius: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid transparent;

        &-size-small {
            padding: 1rem 2rem;
        }

        &-size-normal {
            padding: 2rem 4rem;
        }

        &-size-large {
            padding: 2rem 10rem;
        }

        &-color-default {
            color: #666;
            background-color: #fff;
            border-color: #ccc;
        }

        &-color-primary {
            color: #ffffff;
            background-color: #40a7d9;
            border-color: #40a7d9;
        }

        &-color-success {
            color: #ffffff;
            background-color: #31b099;
            border-color: #31b099;
        }

        &.text {
            color: #5cb3de;
            background-color: transparent;
            border-color: transparent;
            text-decoration: underline;
        }

        &.loading {
            color: #ccc;
            background-color: #e7e7e7;
            border-color: #ccc;
        }

        &.disabled {
            color: #ffffff;
            background-color: #e7e7e7;
            border-color: #ccc;
        }
    }
</style>